<template>
	<view>
		<ly-curriculumtable :weekTableState="true" :weekTableNumber="weekNumbers" :controlWeek="controlWeek"
			:timetableType="timetableType" :timetables="timetables" :startdDate="startdDate" :weekButton="weekButton"
			@nextWeekClick="nextWeekClick" @lastWeekClick="lastWeekClick" @courseClick="courseClick"
			@getLessonDay="getLessonDay" @longPressLesson="longPressLesson" @weekSelectClick="weekSelectClick"
			@weekOpenClick="weekOpenClick">
		</ly-curriculumtable>
		<!-- 课程详情 -->
		<u-modal class="modal" :show="showMyModal" title="课程详情" :closeOnClickOverlay="true" :showConfirmButton="false"
			@close="closeModal">
			<view class="slot-content">
				<u-cell-group>
					<u-cell v-for="(item,index) in modalItem" :key="index" :title="item" :icon="modalIcon[index]"
						:iconStyle="{color: colorList()[index+1]}" size="large"></u-cell>
				</u-cell-group>
			</view>
		</u-modal>
		<u-modal class="modal" :show="showCzModal" title="操作" :closeOnClickOverlay="true" :showConfirmButton="false"
			@close="closeCzModal">
			<view class="slot-content">
				<view v-if="czModalItem&&czModalItem['course_id']">
					<u-row style="width:600upx;">
						<u-col span="4" style="width: 100%;">
							<u-button type="warning" size="small" @click="deleteLesson()">删除</u-button>
						</u-col>
						<u-col span="4" style="width: 100%;">
							<u-button type="primary" size="small" @click="copyLesson()">复制</u-button>
						</u-col>
						<u-col span="4" style="width: 100%;">
							<u-button type="primary" size="small" @click="pasteLesson()">粘贴</u-button>
						</u-col>
					</u-row>
				</view>
				<view v-if="!czModalItem||!czModalItem['course_id']">
					<u-row customStyle="margin-bottom: 10upx">
						<u-col span="12">
							<uni-section title="课程" type="line">
								<uni-data-select v-model="selectLesson" :localdata="lessons"
									@change="changeLesson"></uni-data-select>
							</uni-section>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10upx">
						<u-col span="12">
							<u--input placeholder="请输入内容" border="surround" v-model="lessonName"></u--input>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10upx">
						<u-col span="12">
							<u-button style="width: 300upx;" type="primary" size="small"
								@click="saveLesson()">添加</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-modal>
		<view>
			<uni-popup ref="popup" type="left" background-color="var(--neutral-light)" @change="changePopup">
				<view class="popup-content" style="width: 450upx;">
					<u-divider color="var(--neutral-light)"></u-divider>
					<view v-for="(item,index) in aDayClass">
						<uni-section class="mb-10" :title="item['course_name']" :sub-title="item['course_beg']+'-'+item['course_end']" type="line" titleStyle="{color: var(--neutral-dark)}" subTitleStyle="{color: var(--uni-text-color-grey)}"></uni-section>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				weekNumbers: 20, //一共显示几周
				controlWeek: 1, //显示的第几周
				weekButton: true, //开启上一周下一周按钮
				startdDate: '', //开始时间  默认为当前时间
				timetables: [], //课表
				timetableType: [], //上课时间段
				//弹窗属性
				showMyModal: false, //课程详情弹窗
				modalIcon: ['calendar', 'home', 'server-man', 'clock'], //图标
				modalItem: [], //依次是课程名、教室、教师、上课时间--为了适配渲染
				showCzModal: false, //操作弹框
				czModalItem: null,
				selectLesson: "",
				lessons: [],
				lessonName: "",
				aDayClass:[],//一天的课

			}
		},
		onLoad() {
			this.getLessonList(this.controlWeek);
			this.getLessons();
		},
		methods: {
			getLessonList(pageNum) {
				let userId = uni.getStorageSync("lesson-userId");
				if (!userId) {
					this.$u.toast("重新登录");
					return;
				}
				this.$lApi({
					url: '/lesson/page/get',
					method: 'POST',
					data: { "stu_id": userId, "controlWeek": pageNum }
				}).then((res) => {
					console.log(res);
					if (res["code"] == this.$code.SUCCESS_CODE) {
						this.timetables = res["data"]["lessonInfos"];
						this.timetableType = res["data"]["schedules"];
						this.controlWeek = res["data"]["controlWeek"];
					}
				}, (err) => {
					console.log(err);
				});
			},
			courseClick(re) {
				console.log(re)
				if (re["course_id"]) {
					//console.log(JSON.stringify(re))
					this.modalItem[0] = "课程: " + re.name;
					this.modalItem[1] = re["course_pla"]
					this.modalItem[2] = "教师: 吴老师"
					this.modalItem[3] = `时间: ${re['course_beg']}-${re['course_end']}`;
					this.showMyModal = true;
					//console.log(",",JSON.stringify(this.modalItem))
				} else {
					this.czModalItem = re;
					this.showCzModal = true;
				}
			},
			nextWeekClick(e) {
				console.log("下一周", e)
				this.getLessonList(e);
			},
			lastWeekClick(e) {
				console.log("上一周", e)
				this.getLessonList(e);
			},
			weekOpenClick() {
				console.log("点击了第几周")
			},
			weekSelectClick(e) {
				console.log("您选择了", e)
				this.getLessonList(e);
			},
			//关闭弹窗
			closeModal() {
				this.showMyModal = !this.showMyModal;
			},
			//返回颜色（保持原有颜色，如需使用全局色可调整）
			colorList() {
				return [
					"#ffffff", //0
					"#ffaa00", //1-保持原黄色用于图标
					"#33CC99", //2-保持原绿色
					"#ff5500", //3-保持原橙色
					"#789262", //4-保持原灰绿色
					"#66CCCC", //5-保持原浅青色
					"#9999FF", //6-保持原蓝色
				]
			},
			longPressLesson(re) {
				console.log(re);
				this.czModalItem = re;
				this.showCzModal = true;
			},
			closeCzModal() {
				this.czModalItem = null;
				this.showCzModal = !this.showCzModal;
			},
			getLessons() {
				this.$lApi({
					url: '/lesson/courses/get',
					method: 'POST',
				}).then((res) => {
					if (res["code"] == this.$code.SUCCESS_CODE) {
						this.lessons = res["data"];
					}
				}, (err) => {
					console.log(err);
				});
			},
			getLessonDay(r, w) { //r:当前周星期几,对应week_id w:第几周,对应week_num
				let userId = uni.getStorageSync("lesson-userId");
				if (!userId) {
					this.$u.toast("重新登录");
					return;
				}
				this.$lApi({
					url: '/lesson/byday/get',
					method: 'POST',
					data: { "stu_id": userId, "controlWeek": w, "week_id": r }
				}).then((res) => {
					console.log(res);
					if (res["code"] == this.$code.SUCCESS_CODE) {
						this.aDayClass = res["data"];
					}
				}, (err) => {
					console.log(err);
				});
				console.log(r, w);
				this.$refs.popup.open("left")
			},
			saveLesson() {

			},
			deleteLesson() {

			},
			copyLesson() {

			},
			pasteLesson() {

			},
			changeLesson(e) {
				console.log("e:", e);
			},
			changePopup(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			}
		},
	}
</script>

<style lang="less">
	.uni-popup__wrapper {
		width: 750upx !important;
	}
	
	/* 课程详情弹窗样式 */
.modal {
  .u-modal__header {
    background-color: var(--primary-morandi); /* 弹窗头部使用主蓝色 */
    color: var(--neutral-white); /* 标题文字白色 */
    
    .u-modal__title {
      font-size: var(--font-size-lg); /* 标题字体大小 */
      font-weight: var(--font-weight-bold); /* 标题字重 */
    }
    
    .u-modal__close {
      color: var(--neutral-white); /* 关闭按钮白色 */
    }
  }
  
  .slot-content {
    .u-cell-group {
      .u-cell {
        padding: 20upx 30upx; /* 单元格内边距 */
        font-size: var(--font-size-base); /* 单元格文字大小 */
        color: var(--neutral-dark); /* 单元格文字颜色 */
        
        &::after {
          border-bottom-color: var(--neutral-light); /* 单元格分割线 */
        }
        
        .u-cell__title {
          color: var(--neutral-dark); /* 标题文字颜色 */
        }
        
        .u-icon {
          color: var(--primary-morandi); /* 图标颜色使用主蓝色 */
        }
      }
    }
  }
}

/* 操作弹窗样式 */
.u-modal:nth-of-type(2) {
  .u-modal__header {
    background-color: var(--primary-morandi); /* 头部主蓝色 */
    color: var(--neutral-white); /* 标题白色 */
  }
  
  .slot-content {
    .u-row {
      .u-button {
        &[type="warning"] {
          background-color: var(--status-warning); /* 警告按钮使用全局警告色 */
          color: var(--neutral-white); /* 文字白色 */
          font-size: var(--font-size-sm); /* 字体大小 */
          
         &:active {
                  background-color: var(--status-warning-active);
                }
        }
        
        &[type="primary"] {
          background-color: var(--primary-morandi); /* 主按钮主蓝色 */
          color: var(--neutral-white); /* 文字白色 */
          font-size: var(--font-size-sm); /* 字体大小 */
          
          &:active {
                   background-color: var(--primary-morandi-active);
                 }
        }
      }
    }
    
    .uni-section {
      .uni-section__title {
        font-size: var(--font-size-base); /* 标题字体大小 */
        color: var(--neutral-dark); /* 标题颜色 */
        font-weight: var(--font-weight-normal); /* 字重 */
      }
      
      .uni-section__content {
        font-size: var(--font-size-base); /* 内容字体大小 */
        color: var(--neutral-dark); /* 内容颜色 */
      }
    }
    
    .u--input {
      .u-input {
        border-color: var(--neutral-light); /* 输入框边框颜色 */
        font-size: var(--font-size-base); /* 字体大小 */
        color: var(--neutral-dark); /* 文字颜色 */
        
        &::placeholder {
          color: var(--uni-text-color-placeholder); /* 占位文字颜色 */
        }
      }
    }
  }
}

/* 侧边弹窗样式 */
.uni-popup {
  .popup-content {
    background-color: var(--neutral-white); /* 弹窗内容背景 */
    
    .u-divider {
      border-color: var(--neutral-light); /* 分割线颜色 */
    }
    
    .uni-section {
      .uni-section__title {
        font-size: var(--font-size-base); /* 标题字体大小 */
        color: var(--neutral-dark); /* 标题颜色 */
        font-weight: var(--font-weight-bold); /* 字重 */
      }
      
      .uni-section__subtitle {
        font-size: var(--font-size-sm); /* 副标题字体大小 */
        color: var(--uni-text-color-grey); /* 副标题颜色 */
      }
    }
  }
}
</style>